<template>
	<component
		:is="naiveUi ? NEl : 'div'"
		class="rootNode"
		:class="{
			'root-bg': styleMode !== 'diablo',
			openTabs: !openTabs,
		}"
		v-bind="$attrs"
	>
		<slot></slot>
	</component>
</template>

<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
	inheritAttrs: false,
});
</script>

<script lang="ts" setup>
import { useSetting } from "@/hooks";
import type { HTMLElementTags } from "@model/util";
import { NEl } from "@/naive-ui";

withDefaults(
	defineProps<{
		tag?: HTMLElementTags;
		naiveUi?: boolean;
	}>(),
	{
		tag: "div",
		naiveUi: false,
	},
);
const { styleMode, openTabs } = useSetting();
</script>

<style lang="scss" scoped>
.rootNode {
	width: calc(100% - 20px) !important;
	min-height: $main-height;
	margin: 10px;
	padding: 15px 10px;
	border-radius: 4px;
	box-shadow: $shadow-light;
	&.openTabs {
		min-height: $main-height-notab;
	}
	&.root-bg {
		background-color: #fff;
	}
}
</style>
